<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API

//引入子组件
import XtxSwiper from '@/components/XtxSwiper/index.vue'
//引入props
const props = defineProps({
  currentCategory: {
    type: Array,
    default: () => [],
  },
})

const handleGoodClick = (good) => {
  console.log('商品点击:', good)
  // 这里可以添加跳转逻辑或其他操作
  uni.navigateTo({
    url: `/pages/good/index?id=${good.id}`,
  })
}
</script>

<template>
  <view class="scroll-container">
    <XtxSwiper :distributionSite="2" />
    <view v-for="item in currentCategory">
      <view class="category-item">
        <view>{{ item.name }}</view>
        <view class="goods-container">
          <view
            class="goods-item"
            v-for="good in item.goods"
            @tap="handleGoodClick(good)"
          >
            <image :src="good.picture" mode="scaleToFill" class="goods-image" />
            <view class="goods-name">{{ good.name }}</view>
            <view class="goods-price">$ {{ good.price }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.category-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  //   width: 600rpx;
}

.goods-item {
  width: 33.33%; // 每行显示三个
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  margin: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.goods-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 10rpx;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.goods-price {
  font-size: 24rpx;
  color: #27ba9b;
}

.scroll-container {
  height: 100vh;
  overflow-y: auto;
}
</style>
